<template>
    <div class="cutProfile relative flex fd-column jc-center ai-center"
         v-show="panelShow"
         @mousedown="avatarMouseDown"
         @mouseup="avatarDragFlag = false"
         @mousemove="avatarDrag"
         @wheel="avatarScale">
        <p class="tips">鼠标滚轮缩放，右键拖放移动</p>
        <div class="flex f1 ai-center">
            <div class="square relative">
                <img :src="url"
                     ref="avatarPreview"
                     @load="getAvatarNatural"
                     alt="头像预览"
                     :style="{
                        transform: `
                        translateX(${this.img.posX + 'px'})
                        translateY(${this.img.posY + 'px'})
                        `,
                        width: width + 'px',
                    }"/>
                <div class="mask"></div>
                <div class="border"
                     :style="{
                        backgroundImage: `url(${this.url})`,
                        backgroundPositionX: this.img.posX + 'px',
                        backgroundPositionY: this.img.posY + 'px',
                        backgroundSize: this.width + 'px'
                         }">
                </div>
            </div>
        </div>
        <div class="buttonPanel">
            <button class="submit" @click="cancel">取消</button>
            <button class="submit" @click="avatarConfirm">确定</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "cutProfile",
        data() {
            return {
                imgFile: null,

                panelShow: false,
                url: '',
                img: {
                    src: '',
                    posX: 0,
                    posY: 0,
                    startX: 0,
                    startY: 0,
                },
                mouse: {
                    startX: 0,
                    startY: 0,
                },
                width: 0,
                avatarDragFlag: false,

                hasUpload: false,
            }
        },
        methods: {
            show(file) {
                this.imgFile = file;
                this.url = URL.createObjectURL(file);
                this.panelShow = true;
            },

            getAvatarNatural() {
                let width = this.$refs.avatarPreview.naturalWidth;
                let height = this.$refs.avatarPreview.naturalHeight;

                this.img.posX = -(width - 300) / 2;
                this.img.posY = -(height - 300) / 2;

                this.width = width;
            },

            cancel() {
                this.panelShow = false;
            },

            avatarScale(e) {
                this.width += e.wheelDeltaY / 5;
                if (this.width <= 200) {
                    this.width = 200;
                }
            },

            avatarMouseDown(e) {
                this.avatarDragFlag = true;
                this.img.startX = this.img.posX;
                this.img.startY = this.img.posY;
                this.mouse.startX = e.clientX;
                this.mouse.startY = e.clientY;
            },

            avatarDrag(e) {
                if (this.avatarDragFlag) {
                    this.img.posX = this.img.startX
                        + e.clientX - this.mouse.startX;
                    this.img.posY = this.img.startY
                        + e.clientY - this.mouse.startY;
                }
            },

            async avatarConfirm() {
                if (!this.hasUpload) {
                    this.hasUpload = true;

                    let formData = new FormData();
                    formData.set('avatar', this.imgFile);
                    let {data} = await this.$http.post('/main/avatarImgUpload', formData);

                    let url = [process.env.VUE_APP_SOCKET_URL || '/', data].join('');

                    let post = {
                        url: url,
                        scale: this.width / 300 * 50,
                        pos: {
                            x: this.img.posX / 300 * 50,
                            y: this.img.posY / 300 * 50
                        }
                    }
                    this.$emit('post-avatar', post);
                }
            },

            reset() {
                this.hasUpload = false;
                this.panelShow = false;

                this.imgFile = null;
            },
        }
    }
</script>

<style lang="scss" scoped>
    .cutProfile {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .2);
        overflow: hidden;

        .tips {
            padding: 5px 0;
            text-align: center;
            z-index: 1;
        }

        .square {
            width: 300px;
            height: 300px;
            user-select: none;

            img {
                position: absolute;
                top: 0;
                left: 0;
                pointer-events: none;
            }

            .mask {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background-color: rgba(0, 0, 0, .4);
            }

            .border {
                position: absolute;
                top: -2px;
                left: -2px;
                width: 100%;
                height: 100%;
                border: 4px solid #999;
                background-repeat: no-repeat;
            }
        }

        .buttonPanel {
            padding: 5px 0;
            z-index: 1;

            .cancel,
            .submit {
                width: 100px;
            }
        }
    }
</style>